<template>
  <a-modal title="导入运动员信息" :visible="visible" @ok="closeImport" @cancel="closeImport">
    <a-table :columns="columns" :dataSource="data" bordered size="small">
      <template v-for="col in ['name', 'age', 'sports','coach']" :slot="col" slot-scope="text, record">
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>{{ text }}</template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">保存</a>
            <a @click="() => cancel(record.key)">删除</a>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
          </span>
        </div>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    width: "15%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "年龄",
    dataIndex: "age",
    width: "15%",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "运动项目",
    dataIndex: "sports",
    width: "20%",
    scopedSlots: { customRender: "sports" }
  },
  {
    title: "教练",
    dataIndex: "coach",
    width: "15%",
    scopedSlots: { customRender: "coach" }
  },
  {
    title: "operation",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
const coach=['赵','钱','孙','李','周']
const sports=['举重','三级跳']
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: ``,
    age: 32,
    sports:sports[i%2],
    coach:coach[i%5]+'教练'
  });
}
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      visible:true,
      data,
      columns,
      editingKey: ""
    };
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];

      const target = newData.filter(item => key === item.key)[0];
      const targetIndex = newData.indexOf(target);
      newData.splice(targetIndex, 1);

      this.editingKey = "";
      if (target) {
        delete target.editable;
        this.data = newData;
      }
    },
    closeImport() {
      this.$emit("closeImport");
    }
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
